<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 400px;
        border: 1px solid #000;
        margin: 100px auto;
      }
      section {
        width: 100px;
        height: 200px;
        background-color: blue;
        transition: 2s;

        transform-origin: 0 0;
      }
      div:hover section {
        /* transform: skewX(-30deg); */
        /* transform: skewY(30deg); */
        transform: skew(30deg, 30deg);
      }
    </style>
  </head>
  <body>
    <div>
      <section>哈哈</section>
    </div>
  </body>
</html>

<!-- 
  含义 : 倾斜效果类似于旋转 , 但是意义不一样 , 倾斜是沿着都一个轴线进行倾斜 , 就像是军训的时候教官让我们站军姿 , 身体向前倾斜一样 ; 倾斜的时候会与X轴或者是Y轴形成一个夹角 

  ​	基本语法 : transform : skew()  /  skewX()  /  skewY()

  ​	释义 : 

  ​		skew(参数1, 参数2) : 代表的是沿着x轴和y轴进行倾斜, 参数1和参数2代表的是对应倾斜度数

  ​		skewX(参数) :  代表的是沿着x轴进行倾斜; 与y轴形成夹角

  ​		skewY(参数) :  代表的是沿着Y轴进行倾斜; 与x轴形成夹角
 -->
